<template>
  <el-container>
    <el-header>
      <el-checkbox  v-model="includeOptData">包含操作数据</el-checkbox>
      <el-checkbox  v-model="selectedData">勾选数据</el-checkbox>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="info" icon="el-icon-d-arrow-left" @click="goHome" circle></el-button>
      <el-button type="info" icon="el-icon-check" @click="selectAll" circle></el-button>
      <el-button type="primary" @click="submitData" :underline="false" circle>提</el-button>
      <el-button type="info"  @click="loadMoreImage" :underline="false" circle>...</el-button>
      <el-button type="warning" icon="el-icon-download" @click="exportVideo" circle></el-button>
      <el-input-number v-model="resultSkip" @change="gotoSkip" ></el-input-number>
      <span>偏移量：{{skip+limit}} ，当前目录：{{currentDir}}，总计:{{total}}</span>
    </el-header>
    <el-container>
      <el-aside width="500px"><el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree></el-aside>
      <el-main >

        <div  v-for="image in images">

          <el-card class="box-card" :id="image.id" v-if="image.selected"
                   style="width: 300px;height:250px;border-color:orangered;background-color:grey;float: left;padding-bottom: 20px;margin-bottom: 20px">
            <div slot="header" >
              <el-button style="float: right;width: 100%; padding: 3px 0" type="text" @click="selectCard(image.id)">选择</el-button>
            </div>
            <video :preload="preload"
                   :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
              <source :src="image.url" type="video/mp4">
            </video>
          </el-card>

          <el-card class="box-card" :id="image.id" v-if="!image.selected"
                   style="width: 300px;height:250px;float: left;padding-bottom: 20px;margin-bottom: 20px">
            <div slot="header" >
              <el-button style="float: right;width: 100%; padding: 3px 0" type="text" @click="selectCard(image.id)">选择</el-button>
            </div>
            <video :preload="preload"
                   :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
              <source :src="image.url" type="video/mp4">
            </video>
          </el-card>

        </div>


        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            @close="stopVideo"
            width="80%"
            center>

          <video :preload="preload" id="video"
                 :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
            <source :src="videoSrc" type="video/mp4">
          </video>


            <span slot="footer" class="dialog-footer">
            <el-button @click="stopVideo">取 消</el-button>
            <el-button type="primary" @click="stopVideo">确 定</el-button>
          </span>
        </el-dialog>

      </el-main>
    </el-container>
    <el-footer>
      <el-checkbox  v-model="includeOptData">包含操作数据</el-checkbox>
      <el-checkbox  v-model="selectedData">勾选数据</el-checkbox>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="info" icon="el-icon-d-arrow-left" @click="goHome" circle></el-button>
      <el-button type="info" icon="el-icon-check" @click="selectAll" circle></el-button>
      <el-button type="primary" @click="submitData" :underline="false" circle>提</el-button>
      <el-button type="info"  @click="loadMoreImage" :underline="false" circle>...</el-button>
      <el-button type="warning" icon="el-icon-download" @click="exportVideo" circle></el-button>
      <el-input-number v-model="resultSkip" @change="gotoSkip" ></el-input-number>
      <span>偏移量：{{skip+limit}} ，当前目录：{{currentDir}},总计：{{total}}</span>
    </el-footer>
  </el-container>
</template>

<script>

import {wechat_getTreeData,getListImage,submitImageData,exportImageData} from '../../api/wechat_video';
import Video from  'video.js'
import videoPng from "../assets/video.png";

export default {
  name: "wechat_video",
  data(){
    return {
      centerDialogVisible: false,
      skip:0,
      resultSkip:0,
      total:0,
      limit:100,
      moreOver:false,
      currentDir:'',
      selectAllValue:false,
      includeOptData:false,
      selectedData:false,
      name:'',
      treeData:[],
      images:[],
      imagesUrl:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      url:'http://127.0.0.1:8083/image/item?image=',
      fit:'fill',

      videoSrc: '',
      videoImg: '',
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
      height: '100%', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: false
    }
  },
  mounted() {
    this.getTreeData();
  },
  methods:{
    goHome(){
      this.$router.push('../home')
    },
    handleNodeClick(data) {
      if(data.dir){
        this.getListImage(data.dir);
      }
    },
    getTreeData(){
      wechat_getTreeData.r({path:''}).then(data=>{
        let me = this ;
        if(data.status == 200){
          data.data.data.forEach(item=>{
            if(item.file){
              me.treeData.push({label:item.name,dir:item.name})
            }else{
              let node = {label:item.name,children:[]} ;
              wechat_getTreeData.r({path:item.name}).then(cdata=>{
                if(cdata.status == 200){
                  cdata.data.data.forEach(citem=>{
                    node.children.push({label:citem.name,dir:item.name+"/"+citem.name})
                  })
                  me.treeData.push(node)
                }
              })
            }
          })
        }
      });
    },
    getListImage(dir){
      this.images = [];
      this.imagesUrl=[];
      this.currentDir = dir ;
      this.skip = 0 ;
      this.moreOver = false ;
      this.requestGetImage(dir,this.skip,this.limit);
    },
    loadMoreImage (){
      if(!this.moreOver){
        this.skip += this.limit;
        this.requestGetImage(this.currentDir,this.skip,this.limit);
      }
    },
    requestGetImage(path,skip,limit){
      let me = this ;
      getListImage.r({path:path,skip:skip,limit:limit,includeOptData:this.includeOptData,selectedData:this.selectedData}).then(data=>{
        if(data.status == 200){
          if(data.data.data.length < limit){
            me.moreOver = true ;
          }
          data.data.data.forEach(item=>{
            let urlTemp = '' ;
            if(item.fileType == "mp4"){
              urlTemp = 'http://127.0.0.1:8083/image/playVideo?video='+item.name+'&dir='+path;
            } else{
              urlTemp = 'http://127.0.0.1:8083/image/item?image='+item.name+"&dir="+path;
            }
            let imageTemp = {
              url:urlTemp,
              dir:path,
              id:item.name,
              crtDate:item.crtDate,
              fileType:item.fileType,
              exported:item.exported,
              selected:item.selected
            };
            if(item.fileType != "mp4"){
              me.imagesUrl.push(imageTemp.url);
            }
            me.images.push(imageTemp);
          })
          me.resultSkip = data.data.resultSkip;
          me.total = data.data.total;
        }
      })
    },
    selectCard(image){
      this.images.forEach(item=>{
        if(item.id == image){
          item.selected = item.selected?false:true ;
        }
      })
    },
    selectAll(){
      let me = this;
      this.selectAllValue = this.selectAllValue?false:true;
      this.images.forEach(item=>{
        item.selected = me.selectAllValue ;
      })
    },
    submitData(){
      let data = JSON.stringify(this.images);
      let me = this;
      submitImageData.r(this.images).then(data=>{
        this.$message({
          showClose: true,
          message: '提交成功！'
        });
        me.getListImage(me.currentDir);
      })
    },
    gotoSkip(){
      this.images = [];
      this.imagesUrl=[];
      this.currentDir = this.currentDir ;
      this.skip = this.resultSkip ;
      this.moreOver = false ;
      this.requestGetImage(this.currentDir,this.skip,this.limit);
    },
    playVideo(id,dir){
      this.videoSrc = 'http://127.0.0.1:8083/image/playVideo?video='+id+"&dir="+dir;
      this.centerDialogVisible = true;
      //$("#video").load();
      document.getElementById("video").load();
    },
    stopVideo(){
      this.videoSrc = '';
      this.centerDialogVisible = false;
      document.getElementById("video").pause();
     // this.$refs.videoPlayer.paused = true ;
     // this.$refs.videoPlayer.remove();
    },
    exportVideo(){
      let data = JSON.stringify(this.images);
      let me = this;
      exportImageData.r(this.images).then(data=>{
        this.$message({
          showClose: true,
          message: '提交成功！'
        });
        me.getListImage(me.currentDir);
      })
    }

  }
}
</script>

<style scoped>
/deep/ .el-alert__content{
  margin-left: 0px;
}
/deep/ .el-card{
  width: 150px;
  margin: 0px 0px ;
  padding: 0px 0px;
}
</style>